import React from 'react';
import { Card, Col, Row, Typography } from 'antd';
import styles from './AboutMe.module.css'; // 引入模块化样式

const { Title, Paragraph } = Typography;

const AboutMe = () => {
    return (
        <div className={styles.aboutMe}>
            <Title level={2} className={styles.title}>About Me</Title>
            <Row gutter={16}>
                <Col span={8}>
                    <Card
                        hoverable
                        cover={<img alt="Profile" src="https://wkq-img.oss-cn-chengdu.aliyuncs.com/blog/pic/userAvatar/admin11713023873486329.jpg" />}
                        style={{ borderRadius: '10px', marginBottom: '20px', width: '150px', height: '150px' }}
                    >
                        <Card.Meta title="wangkaiqi" description="Web Developer" />
                    </Card>
                </Col>
                <Col span={16}>
                    <Paragraph>
                        Hello! I'm John Doe, a web developer with a passion for creating interactive web applications.
                    </Paragraph>
                    <Title level={4}>Background</Title>
                    <Paragraph>
                        I have a background in Computer Science and have worked in various industries, including e-commerce and education.
                    </Paragraph>
                    <Title level={4}>Skills</Title>
                    <Paragraph>
                        <ul className={styles.list}>
                            <li>JavaScript</li>
                            <li>React</li>
                            <li>Node.js</li>
                            <li>CSS</li>
                        </ul>
                    </Paragraph>
                    <Title level={4}>Hobbies</Title>
                    <Paragraph>
                        In my free time, I enjoy:
                        <ul className={styles.list}>
                            <li>Hiking</li>
                            <li>Reading</li>
                            <li>Photography</li>
                        </ul>
                    </Paragraph>
                    <Title level={4}>Contact Me</Title>
                    <Paragraph>
                        Feel free to reach out through my social media or email:
                        <ul className={styles.list}>
                            <li><a href="https://www.linkedin.com/in/johndoe" className={styles.link}>LinkedIn</a></li>
                            <li><a href="https://twitter.com/johndoe" className={styles.link}>Twitter</a></li>
                            <li>Email: <a href="mailto:johndoe@example.com" className={styles.link}>johndoe@example.com</a></li>
                        </ul>
                    </Paragraph>
                </Col>
            </Row>
        </div>
    );
};

export default AboutMe;
